<template>
    <div class="main">
        <div class="top">
            <p class="toptitle">首页</p>
            <i class="iconfont icon-youjiantou"></i>
            <p class="toptitle">数据统计</p>
            <i class="iconfont icon-youjiantou"></i>
            <p class="lasttitle">商品统计</p>
        </div>
        <div class="table">
            <p class="list">商品统计</p>
            <div class="chart" ref="chart"></div>

        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, onBeforeUnmount } from 'vue';

// 获取dom
const chart = ref(null);
// echarts 实例对象
let myEchart = null;

const draw = () => {
  if (chart.value) {
    myEchart = echarts.init(chart.value);
  const option = {
  xAxis: {
    data: ['食品类', '饮料类', '水果类', '蔬菜类', '其他类']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 23, 19],
      type: 'line',
      label: {
        show: true,
        position: 'bottom',
        textStyle: {
          fontSize: 20
        }
      }
    }
  ]
};
    myEchart.setOption(option);
  }
};

onMounted(() => {
  draw();
});

const handleResize = () => {
  if (myEchart) {
    myEchart.resize();
  }
};

window.addEventListener('resize', handleResize);

// 销毁页面 取消监听window事件
onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

<style scoped>
.main{
  width:100%;
  height: 730px;
  background-color: #f0f0f0;
}

/* 中间 */
.table{
  margin: 20px;
  padding: 20px;
  border-radius: 5px;
  background-color: #fff;
  min-height: 600px;
}
.list{
  width: 100%;
  border-bottom: 1px solid #e1e1e1;
  font-size: 20px;
  margin-bottom: 20px;
  padding-bottom: 10px;
}
/* 顶部面包屑 */
.toptitle{
  font-weight: bold;
}
.top{
  width:100%;
  height: 50px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-left: 20px;
}
.iconfont{
  font-size: 14px;
  color: #999999;
  margin: 0 5px;
}

.lasttitle{
  color: #999999;
}
</style>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.home {
  width: 100%; /* 修改为 100% 以填满父容器 */
  height: 400px; /* 设置具体高度 */
}

.chart {
  width: 100%; /* 修改为 100% 以填满父容器 */
  height: 550px;
}
</style>